<template>
    <div style="margin-left: 30px;margin-top: 60px;">
        <span style="color: #1890FF;font-size: 20px;font-weight: bold;margin-right: 60px;">养殖信息</span>
        <el-button type="info" @click="form.dialogFormVisible = true">设置</el-button>
        <hr style="margin-top: 40px;margin-bottom: 40px;">
        <div style="margin-bottom: 40px;">
            <span v-if="form.CultivationIsDeleted == false"
                style="color: #797979;font-size: 16px;font-weight: bold;">暂无数据，请点击设置添加数据</span>
            <table v-else style="width: 60%;">
                <tr style="height: 40px;">
                    <td>品种：{{ CultivationFind.cultivationType }}</td>
                    <td>来源：{{ CultivationFind.cultivationAddress }}</td>
                </tr>
                <tr style="height: 40px;">
                    <td>饲养天数：{{ CultivationFind.cultivationDay }} 天</td>
                    <td>饲料品牌：{{ CultivationFind.cultivationBrand }}</td>
                </tr>
                <tr style="height: 40px;">
                    <td>饲养负责人：{{ CultivationFind.cultivationPeople }}</td>
                    <td>出栏日期：{{ CultivationFind.cultivationTime }}</td>
                </tr>
            </table>
        </div>
        <span style="color: #1890FF;font-size: 20px;font-weight: bold;margin-right: 60px;">保健信息</span>
        <el-button type="info" @click="form.dialogFormVisible1 = true">设置</el-button>
        <hr style="margin-top: 40px;margin-bottom: 40px;">
        <div>
            <span v-if="form.ImmuneIsDeleted == false"
                style="color: #797979;font-size: 16px;font-weight: bold;">暂无数据，请点击设置添加数据</span>
            <el-table v-else :data="immunesList">
                <el-table-column prop="immuneDay" label="饲养天数" />
                <el-table-column prop="immuneType" label="保健方式" />
                <el-table-column prop="immuneWay" label="保健方法" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" link
                            @click="updateImmuneFind(scope.row)">修改</el-button>&nbsp;&nbsp;&nbsp;
                        <el-button type="primary" link @click="deletedImmune(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <span style="color: #1890FF;font-size: 20px;font-weight: bold;margin-right: 60px;">动检证</span>
        <hr style="margin-top: 40px;margin-bottom: 40px;">
        <div>
            <el-upload v-model:file-list="fileListCultivation" action="https://localhost:7169/api/Good/LoadImages"
                list-type="picture-card" :limit="9" :on-remove="handleRemove" :on-exceed="exceedImages"
                :on-success="successImages">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
        </div>
        <span style="color: #1890FF;font-size: 20px;font-weight: bold;margin-right: 60px;">企业信息</span>
        <el-button type="info" @click="form.dialogFormVisible2 = true">设置</el-button>
        <hr style="margin-top: 40px;margin-bottom: 40px;">
        <div style="margin-bottom: 40px;">
            <span v-if="form.EnterpriseIsDeleted == false"
                style="color: #797979;font-size: 16px;font-weight: bold;">暂无数据，请点击设置添加数据</span>
            <table v-else style="width: 60%;">
                <tr style="height: 40px;">
                    <td>养殖场：{{ EnterpriseFind.cultivationEnterpriseName }}</td>
                    <td>负责人：{{ EnterpriseFind.cultivationEnterprisePeople }}</td>
                </tr>
                <tr style="height: 40px;">
                    <td>存栏数量：{{ EnterpriseFind.cultivationEnterpriseNum }} 天</td>
                </tr>
            </table>
        </div>
        <span style="color: #1890FF;font-size: 20px;font-weight: bold;margin-right: 60px;">企业照片</span>
        <hr style="margin-top: 40px;margin-bottom: 40px;">
        <div>
            <el-upload v-model:file-list="fileListCultivationEnterprise" action="https://localhost:7169/api/Good/LoadImages"
                list-type="picture-card" :limit="9" :on-remove="handleRemove" :on-exceed="exceedImages"
                :on-success="successImagesEnterprise">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
        </div>
    </div>

    <!-- 养殖添加弹框 -->
    <div>
        <el-dialog v-model="form.dialogFormVisible" title="养殖信息" width="500">
            <el-form :model="CultivationFind">
                <el-form-item label="品种：" :label-width="140">
                    <el-input v-model="CultivationFind.cultivationType" autocomplete="off" placeholder="请填写品种" />
                </el-form-item>
                <el-form-item label="来源：" :label-width="140">
                    <el-input v-model="CultivationFind.cultivationAddress" autocomplete="off" placeholder="请填写来源" />
                </el-form-item>
                <el-form-item label="饲养天数：" :label-width="140">
                    <el-input v-model="CultivationFind.cultivationDay" autocomplete="off" placeholder="请填写日期饲养天数" />
                </el-form-item>
                <el-form-item label="饲料品牌：" :label-width="140">
                    <el-input v-model="CultivationFind.cultivationBrand" autocomplete="off" placeholder="请填写饲料品牌" />
                </el-form-item>
                <el-form-item label="饲养负责人：" :label-width="140">
                    <el-input v-model="CultivationFind.cultivationPeople" autocomplete="off" placeholder="请填写饲养负责人" />
                </el-form-item>
                <el-form-item label="出栏日期：" :label-width="140">
                    <el-date-picker v-model="CultivationFind.cultivationTime" type="date" placeholder="请选择日期"
                        :size="true" format="YYYY/MM/DD " />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <!-- <el-button @click="escData()">取消</el-button> -->
                    <el-button v-if="form.CultivationIsDeleted == false" type="success" @click="addCultivation()">
                        保存
                    </el-button>
                    <el-button v-else type="primary" @click="updateCultivation()">
                        修改
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <!-- 保健添加弹框 -->
    <div>
        <el-dialog v-model="form.dialogFormVisible1" title="养殖信息" width="500">
            <el-form :model="immunesForm">
                <el-form-item label="饲养天数：" :label-width="140">
                    <el-input v-model="immunesForm.immuneDay" autocomplete="off" placeholder="请填写饲养天数" />
                </el-form-item>
                <el-form-item label="保健方式：" :label-width="140">
                    <el-input v-model="immunesForm.immuneType" autocomplete="off" placeholder="请填写保健方式" />
                </el-form-item>
                <el-form-item label="保健方法：" :label-width="140">
                    <el-input v-model="immunesForm.immuneWay" autocomplete="off" placeholder="请填写保健方法" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="escImmunes()">取消</el-button>
                    <el-button type="success" @click="addImmune()">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <!-- 保健修改弹框 -->
    <div>
        <el-dialog v-model="form.dialogFormVisible1_1" title="养殖信息" width="500">
            <el-form :model="immunesForm">
                <el-form-item label="饲养天数：" :label-width="140">
                    <el-input v-model="immunesForm.immuneDay" autocomplete="off" placeholder="请填写饲养天数" />
                </el-form-item>
                <el-form-item label="保健方式：" :label-width="140">
                    <el-input v-model="immunesForm.immuneType" autocomplete="off" placeholder="请填写保健方式" />
                </el-form-item>
                <el-form-item label="保健方法：" :label-width="140">
                    <el-input v-model="immunesForm.immuneWay" autocomplete="off" placeholder="请填写保健方法" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="escImmunes()">取消</el-button>
                    <el-button type="success" @click="updateImmune()">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
        <!-- 养殖添加弹框 -->
    <div>
        <el-dialog v-model="form.dialogFormVisible2" title="养殖信息" width="500">
            <el-form :model="EnterpriseFind">
                <el-form-item label="养殖场：" :label-width="140">
                    <el-input v-model="EnterpriseFind.cultivationEnterpriseName" autocomplete="off" placeholder="请填写养殖场" />
                </el-form-item>
                <el-form-item label="负责人：" :label-width="140">
                    <el-input v-model="EnterpriseFind.cultivationEnterprisePeople" autocomplete="off" placeholder="请填写负责人" />
                </el-form-item>
                <el-form-item label="存栏数量（只）：" :label-width="140">
                    <el-input v-model="EnterpriseFind.cultivationEnterpriseNum" autocomplete="off" placeholder="请填写存栏数量" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <!-- <el-button @click="escData()">取消</el-button> -->
                    <el-button v-if="form.EnterpriseIsDeleted == false" type="success" @click="addCultivationEnterprise()">
                        保存
                    </el-button>
                    <el-button v-else type="primary" @click="updateCultivationEnterprise()">
                        修改
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore();
const router = useRouter();
const route = useRoute();
const form = reactive({
    goodId: store.GoodId,
    CultivationIsDeleted: false,
    ImmuneIsDeleted: false,
    EnterpriseIsDeleted: false,

    dialogFormVisible: false,
    dialogFormVisible1: false,
    dialogFormVisible1_1: false,
    dialogFormVisible2: false,

})
const CultivationFind = ref({
    cultivationId: '',
    cultivationType: '',
    cultivationAddress: '',
    cultivationDay: '',
    cultivationBrand: '',
    cultivationPeople: '',
    cultivationTime: '',
    goodId: form.goodId,
})
//饲养反填
const getCultivationFind = () => {
    axios.get(`https://localhost:7169/api/Good/GetCultivationFind?goodId=${form.goodId}`)
        .then(res => {
            // console.log(res.data)
            if (res.data != "") {
                CultivationFind.value = res.data
                form.CultivationIsDeleted = true
                CultivationImages()
            }
        })
        .catch(err => {


            console.log(err)
        })
}
//添加养殖
const addCultivation = () => {
    console.log(CultivationFind.value)
    axios.post('https://localhost:7169/api/Good/AddCultivation', CultivationFind.value)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success('添加成功')
                form.CultivationIsDeleted = true
                form.dialogFormVisible = false
                getCultivationFind()
            }
            else {
                ElMessage.error('添加失败')
            }
        })
}
//修改养殖
const updateCultivation = () => {
    // getCultivationFind()
    axios.post('https://localhost:7169/api/Good/UpdateCultivation', CultivationFind.value)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success('修改成功')
                form.dialogFormVisible = false
                getCultivationFind()
            }
            else {
                ElMessage.error('修改失败')
            }
        })
}
//添加保健信息
const immunesForm = reactive({
    immuneId: '',
    immuneDay: '',
    immuneType: '',
    immuneWay: '',
    goodId: form.goodId,
})
const escImmunes = () => {
    form.dialogFormVisible1 = false,
        form.dialogFormVisible1_1 = false,

        immunesForm.immuneId = '',
        immunesForm.immuneDay = '',
        immunesForm.immuneType = '',
        immunesForm.immuneWay = ''
}
const addImmune = () => {
    axios.post(`https://localhost:7169/api/Good/AddUmmunes`, immunesForm)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success("添加成功")
                escImmunes()
                getImmuneList()
            }
            else {

                ElMessage.error("添加失败")
            }
        })
        .catch(err => {
            console.log(err)
        })
}

//保健信息显示
const immunesList = ref([])
const getImmuneList = () => {
    axios.get(`https://localhost:7169/api/Good/GetT_Immunes?goodId=${form.goodId}`)
        .then(res => {
            console.log(res.data)
            if (res.data.length > 0) {
                immunesList.value = res.data
                form.ImmuneIsDeleted = true
            }
        })
        .catch(err => {
            console.log(err)
        })
}
//修改保健信息
const updateImmuneFind = (row: any) => {
    immunesForm.immuneId = row.immuneId,
        immunesForm.immuneDay = row.immuneDay,
        immunesForm.immuneType = row.immuneType,
        immunesForm.immuneWay = row.immuneWay,
        form.dialogFormVisible1_1 = true
}
const updateImmune = () => {
    axios.post(`https://localhost:7169/api/Good/UpdateImmunes`, immunesForm)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success("修改成功")
                escImmunes()
                getImmuneList()
            }
            else {

                ElMessage.error("修改失败")
            }
        })
        .catch(err => {
            console.log(err)
        })
}
//删除保健信息
const deletedImmune = (row: any) => {
    axios.post(`https://localhost:7169/api/Good/DeletedImmunes`, row)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success("删除成功")
                getImmuneList()
            }
            else {

                ElMessage.error("删除失败")
            }
        })
        .catch(err => {
            console.log(err)
        })
}
// 上传图片商品坚持报告
import type { UploadProps, UploadUserFile } from 'element-plus'

const fileListCultivation = ref<UploadUserFile[]>([
])
const fileListCultivationEnterprise = ref<UploadUserFile[]>([
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
//删除图片
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    let Url = uploadFile.url
    console.log(Url)

    axios.get(`https://localhost:7169/api/Good/DeletedImages?Url=${Url}`)
        .then(res => {
            ElMessage.success('删除成功')
        })
        .catch(err => {
            ElMessage.error('删除失败')

            console.log(err)
        })
}

//上传成功养殖
const successImages = ((response: any) => {
    if(CultivationFind.value.cultivationId=='')
    {
        ElMessage.error('请先添加养殖信息')
        return
    }
    // console.log(response)
    let Url = 'https://localhost:7169/' + response
    axios.get(`https://localhost:7169/api/Good/AddImage?Id=${CultivationFind.value.cultivationId}&Url=${Url}`)
        .then(res => {
            ElMessage.success('上传成功')
        })
        .catch(err => {
            // ElMessage.error('上传失败')

            console.log(err)
        })
    fileListCultivation.value.forEach((c: any) => {
        if (c.response == response) {
            c.url = Url
            return
        }
    });
    // console.log(fileListCultivation)

}
)
//上传成功企业
const successImagesEnterprise = ((response: any) => {
    if(EnterpriseFind.value.cultivationEnterpriseId=='')
    {
        ElMessage.error('请先添加企业信息')
        return
    }
// console.log(response)
let Url = 'https://localhost:7169/' + response
axios.get(`https://localhost:7169/api/Good/AddImage?Id=${EnterpriseFind.value.cultivationEnterpriseId}&Url=${Url}`)
    .then(res => {
        ElMessage.success('上传成功')
    })
    .catch(err => {
        // ElMessage.error('上传失败')

        console.log(err)
    })
    fileListCultivationEnterprise.value.forEach((c: any) => {
    if (c.response == response) {
        c.url = Url
        return
    }
});
// console.log(fileListCultivation)

}
)
//反填养殖资质图片
const CultivationImages = () => {
    // console.log(CultivationFind.value)
    axios.get(`https://localhost:7169/api/Good/GetT_Images?Id=${CultivationFind.value.cultivationId}`)
        .then(res => {
            console.log(res.data)
            fileListCultivation.value = []
            if (res.data.length > 0) {

                res.data.forEach((c: any) => {
                    fileListCultivation.value.push({ name: c.imageId, url: c.imageAddress })
                });

            }
        })
}
//上传图片限制
const exceedImages = () => {
    ElMessage.error('最多上传9张图片')
}
//企业信息
const  EnterpriseFind=ref({
    cultivationEnterpriseId:'',
      cultivationEnterpriseName:'',
      cultivationEnterprisePeople:'',
      cultivationEnterpriseNum:0,
      goodId:form.goodId,
})
//添加企业
const addCultivationEnterprise = () => {
    console.log(EnterpriseFind.value)
    axios.post('https://localhost:7169/api/Good/AddCultivationEnterprise', EnterpriseFind.value)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success('添加成功')
                // form.EnterpriseIsDeleted = true
                form.dialogFormVisible2 = false
                getCultivationEnterpriseFind()
            }
            else {
                ElMessage.error('添加失败')
            }
        })
}
//修改企业
const updateCultivationEnterprise = () => {
    // getCultivationFind()
    axios.post('https://localhost:7169/api/Good/UpdateCultivationEnterprise', EnterpriseFind.value)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success('修改成功')
                form.dialogFormVisible2 = false
                getCultivationEnterpriseFind()
            }
            else {
                ElMessage.error('修改失败')
            }
        })
}
//企业反填
const getCultivationEnterpriseFind = () => {
    axios.get(`https://localhost:7169/api/Good/GetCultivationEnterpriseFind?goodId=${form.goodId}`)
        .then(res => {
            // console.log(res.data)
            if (res.data != "") {
                EnterpriseFind.value = res.data
                form.EnterpriseIsDeleted = true
                CultivationEnterpriseImages()
            }
        })
        .catch(err => {


            console.log(err)
        })
}
//反填养殖企业图片
const CultivationEnterpriseImages = () => {
    // console.log(CultivationFind.value)
    axios.get(`https://localhost:7169/api/Good/GetT_Images?Id=${EnterpriseFind.value.cultivationEnterpriseId}`)
        .then(res => {
            console.log(res.data)
            fileListCultivationEnterprise.value = []
            if (res.data.length > 0) {

                res.data.forEach((c: any) => {
                    fileListCultivationEnterprise.value.push({ name: c.imageId, url: c.imageAddress })
                });

            }
        })
}
onMounted(() => {
    getCultivationFind()
    getImmuneList()
    getCultivationEnterpriseFind()

})
</script>